<template>
	<div class="component-container">
		<div class="component-container__main">
			
		</div>
		<div class="component-container__footer">
			<el-button @click="handlePrev">上一步，选择Api接口</el-button>
			<!--<el-button type="primary" @click="handleNext">下一步，生成页面</el-button>-->
		</div>
		<div style="margin-top: 20px">
			
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, nextTick, reactive, ref, toRefs } from 'vue';
import { ElForm, ElMessage, ElCascaderPanel } from 'element-plus';
import { Option } from '@/types/common';
// API 引用
import { ajax_request } from '@/codegen/api/index';
import { computed } from '@vue/reactivity';

const emit = defineEmits(['next', 'update:modelValue']);
const dataFormRef = ref(ElForm);

const state = reactive({
	formData: { url: '' },
	rules: {
		url: [{ required: true, message: '请填写OpenApi完整网址', trigger: 'blur' }]
	},
	cascaderOptions: [] as Option[],
	pathLabels: []
});

const { rules, formData, cascaderOptions, pathLabels } = toRefs(state);
function parseOpenApi() {
	dataFormRef.value.validate((valid: any) => {
		if (valid) {
			ajax_request(state.formData.url).then(r => {
				state.cascaderOptions = parseData(r.data.data);
				//console.log(parseData(r.data.data))
			});
		}
	});
}
function parseData(data: any): Option[] {
	var ret = [];
	for (let i in data.tags) {
		var item = {
			value: data.tags[i].name,
			label: data.tags[i].name
		} as Option;
		var children = [];
		var name = data.tags[i].name;
		for (let j in data.paths) {
			//console.log(Object.keys(data.paths[j]))
			//console.log(Object.values(data.paths[j])[0].tags)
			var k = Object.keys(data.paths[j]);
			var pathValue = Object.values(data.paths[j])[0];
			var summary = pathValue.summary;
			var tags = pathValue.tags;
			if (tags.includes(name)) {
				var item2 = {
					value: j,
					label: summary + `(${k}:${j})`
				};
				children.push(item2);
			}
		}
		item.children = children;
		ret.push(item);
	}
	return ret;
}
function handlePrev() {
  emit('prev');
}
function handleNext() {
	/*
	if (!goodsInfo.value.categoryId) {
		ElMessage.warning('请选择商品分类');
		return false;
	}*/
	//emit('next');
}
const cascaderRef = ref(ElCascaderPanel);
function handleCascaderChange() {
	console.log(222);
	const checkNode = cascaderRef.value.getCheckedNodes()[0];
	console.log(checkNode);
	state.pathLabels = checkNode.pathLabels; // 商品分类选择层级提示
	//goodsInfo.value.categoryId = checkNode.value;
}
onMounted(() => {});
</script>

<style lang="scss" scoped>
.component-container {
	&__main {
		margin: 20px auto;
	}

	&__footer {
		position: fixed;
		bottom: 20px;
		right: 20px;
	}
}
</style>
